// panel/index.js, this filename needs to match the one registered in package.json
// exports.ready = function () {
//     // ...
// }
let fs = require('fire-fs');
let Vue = Editor.require('packages://vuetest1/panel/vue');
let a = Editor.require('packages://vuetest1/panel/elementui');
Vue.use(a);
Editor.Panel.extend({
	// css style for panel
	style: fs.readFileSync(Editor.url('packages://vuetest1/panel/elementui.css'), 'utf8'),

	// html template for panel
	template: `
    <div id='app'>
    <div >
    <el-button type="primary">主要按钮</el-button>
    <el-slider v-model="value1"></el-slider>
    </div>

    </div>
  `,

	// element and variable binding
	$: {
		btn: '#app'
	},

	// method executed when template and styles are successfully loaded and initialized
	ready() {

		new Vue({
			el: this.$btn, // 注意这里，没有不能使用#app，原因是ShadowDOM
			data() {
				return {
					value1: 0,
				};
			},
			created() {
				console.log('created');
			},
			methods: {
				onBtnClick() {
					console.log('点击按钮');
				}
			}
		});

		this.$btn.addEventListener('confirm', () => {
			Editor.Ipc.sendToMain('vuetest1:clicked');
		});
	},

	// register your ipc messages here
	messages: {
		'vuetest1:hello'(event) {
			console.log(Vue.version);
			this.$label.innerText = 'Hello!';
		}
	}
});
